<!--
 * @Description: 侧边栏
 * @Author:
 * @Date: 2022-03-29 10:58:48
 * @LastEditTime: 2022-12-02 19:46:21
-->
<template>
  <div
    class="sidebar"
    :class="[
      !collapse ? 'sidebar-content' : '',
      props.suspension ? 'sidebar-suspension' : '',
    ]"
  >
    <div class="sidebar-container">
      <el-menu
        class="sidebar-el-menu"
        :default-active="onRoutes"
        :default-openeds="openList"
        :collapse="collapse"
        background-color="rgba(0,0,0,0)"
        text-color="#CAD1DC"
        active-text-color="#CAD1DC"
        :unique-opened="false"
        router
        :collapse-transition="true"
      >
        <SidebarItem
          v-for="(item, index) in routes"
          :key="item.path"
          :item="item"
          :index="String(index)"
        ></SidebarItem>
      </el-menu>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, defineProps } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import SidebarItem from './components/SidebarItem.vue'

const props = defineProps({
  // 侧边栏是否悬浮
  suspension: {
    type: Boolean,
    value: false
  }
})
const route = useRoute()

const onRoutes = computed(() => route.path)

const store = useStore()
const collapse = ref(false)
const routes = computed(() => store.state.routes.secondRouts.filter(
  (item) => item.meta && !item.meta.hidden
))

const openList = computed(() => Array.from({ length: routes.value.length }, (_, index) => index))

</script>

<style scoped lang="scss">
// 修改侧边栏动画
.horizontal-collapse-transition {
  transition: 0.1s width ease-in-out, 0s padding-left ease-in-out,
    0s padding-right ease-in-out !important;
}

.el-menu {
  border: none;
}
.sidebarToLeft {
  transform: translateX(-151px);
}
.sidebar {
  height: 100%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0;
  user-select: none;
  background: linear-gradient(180deg, #445471 0%, rgba(68,84,113, 0.9) 100%);
  box-shadow: 1px -8px 10px -3px rgba(68,84,113, 0.8);
  .sidebar-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    position: relative;
    background: transparent;
  }
}
.sidebar-suspension {
  box-shadow: 1px -8px 10px -3px rgba(0, 0, 0, 0.3);
  transition: all 0.2s;
}
.sidebar-container::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 151px;
  flex: 1;
  flex-shrink: 0;
  overflow: auto;
}
.sidebar-container > ul {
  height: 100%;
}

.collapse-btn {
  flex-shrink: 0;
  width: 64px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  font-size: 18px;
}

.el-menu.sidebar-el-menu {
  overflow-x: hidden;
}
</style>
